<template>
  <Loading :loading="loading">
    <div>
      <div class="login-banner">
        <img src="./img/banner3.png" class="login-banner-img" />
      </div>
      <div class="login-title">
        <div class="flex-row flex-align-center">
          <div
            class="c-3lvam3"
            :class="loginType === 'validatecode' ? 'c-y5h58s-active' : ''"
            @click="handleChange('validatecode')"
          >
            手机号登录
          </div>
          <div class="c-y5h58s-line"></div>
          <div
            class="c-3lvam3"
            :class="loginType === 'password' ? 'c-y5h58s-active' : ''"
            @click="handleChange('password')"
          >
            账号密码登录
          </div>
        </div>

        <div class="login-title-line">
          <img src="./img/rect.png" class="login-title-line-img" />
          <div
            class="login-title-line-inner"
            :class="loginType === 'password' ? 'c-y5h58s-img-active' : ''"
          >
            <img
              src="./img/rect-color.png"
              class="login-title-line-inner-img"
            />
          </div>
        </div>
      </div>
      <van-form
        v-show="loginType === 'validatecode'"
        class="login-form"
        @submit="onSubmit"
        label-width="28.5"
        ref="validatecode"
      >
        <div class="form-content">
          <van-field
            v-model="codeInfo.mobile"
            name="mobile"
            placeholder="请输入手机号码"
            :rules="[{ required: true, message: '' }]"
          >
            <template #label>
              <div>
                <img src="./img/user3.png" class="form-user-img" />
              </div>
            </template>
          </van-field>
          <van-field
            v-model="codeInfo.validateCode"
            name="validateCode"
            placeholder="请输入验证码"
            :rules="[{ required: true, message: '' }]"
          >
            <template #label>
              <div>
                <img src="./img/psd3.png" class="form-psd-img" />
              </div>
            </template>
            <template #button>
              <span class="psd-color" v-show="isShow" @click="getCode">
                发送验证码
              </span>
              <span class="psd-color-inactive" v-show="!isShow">
                重新获取{{ count }}s
              </span>
            </template>
          </van-field>
        </div>
        <div class="form-btn">
          <van-button
            class="form-btn-border"
            type="primary"
            block
            native-type="submit"
            :disabled="btnDisabled"
          >
            登录
          </van-button>
        </div>
      </van-form>
      <van-form
        v-show="loginType === 'password'"
        class="login-form"
        @submit="onSubmit"
        label-width="28.5"
        ref="password"
      >
        <div class="form-content">
          <van-field
            v-model="psdInfo.mobile"
            name="mobile"
            placeholder="请输入账号"
            :rules="[{ required: true, message: '' }]"
          >
            <template #label>
              <div>
                <img src="./img/user3.png" class="form-user-img" />
              </div>
            </template>
          </van-field>
          <van-field
            v-model.trim="psdInfo.password"
            name="password"
            placeholder="请输入密码"
            type="password"
            :rules="[{ required: true, message: '' }]"
          >
            <template #label>
              <div>
                <img src="./img/psd3.png" class="form-psd-img" />
              </div>
            </template>
          </van-field>
          <!-- <van-field
          v-model.trim="psdInfo.validateCode"
          name="validateCode"
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '' }]"
        >
          <template #label>
            <div>
              <img src="./img/psd3.png" class="form-psd-img" />
            </div>
          </template>
        </van-field> 
        <div @click="handleChangeImgCode">
          <img :src="imgSrc" />
        </div>
        --></div>

        <div class="form-btn">
          <van-button
            class="form-btn-border"
            type="primary"
            block
            native-type="submit"
            :disabled="btnDisabled"
          >
            登录
          </van-button>
        </div>
      </van-form>

      <div class="login-bottom">
        <img
          :src="imgflag ? checkedImg : unCheckedImg"
          @click="test"
          style="width: 0.4rem; height: 0.4rem; vertical-align: middle"
        />
        我已同意
        <span
          class="login-protocol"
          @click="$router.push({ path: '/loginPrivacy' })"
        >
          《万利保险平台用户服务协议》
        </span>
        及
        <span
          class="login-protocol"
          @click="$router.push({ path: '/loginRegister' })"
        >
          《隐私政策》
          <!-- @click="$router.push({ path: '/loginRegister' })" -->
        </span>
        <p>
          如您还不是万利员工，可申请
          <span class="login-protocol">
            <!-- <a
              href="https://h5-test.wanlibaoxian.com/#/joinUs"
              style="color: #09a7fe"
            >
              加入万利
            </a> -->
            <a
              style="color: #09a7fe"
              :href="envioment === 'uat'? 'https://h5-test.wanlibaoxian.com/#/joinUs': 'https://m.wanlibaoxian.com/#/joinUs'">
              加入万利
            </a>
          </span>
        </p>
      </div>
    </div>
  </Loading>
</template>
<script>
import API from '@/services/h5/login'
// import { ls } from '@/utils/aes'
import { mapMutations } from 'vuex'
// import { setAuthorization } from '@/utils/request'
import Loading from '@/components/data-loading'
import { isWeChatBrowser } from '@/config/h5/index.js'
import wxlogin from '@/mixin/wxlogin'
export default {
  components: { Loading },
  mixins: [wxlogin],
  name: 'login',
  data() {
    return {
      envioment: process.env.VUE_APP_ENV,
      imgSrc: null,
      imgflag: false,
      checkedImg: require('./img/icon_checked.png'),
      unCheckedImg: require('./img/icon_unchecked.png'),
      loginType: 'validatecode', //password：账号密码登录，validatecode：验证码登录
      psdInfo: {
        mobile: '',
        password: '',
        validateCode: ''
      },
      codeInfo: {
        mobile: '',
        validateCode: ''
      },
      isShow: true,
      count: 60,
      timer: null,
      uuid_key: null,
      openId: '',
      // loading: false,
      params: null,
      isChecked: false //是否同意协议
    }
  },
  computed: {
    btnDisabled() {
      if (this.loginType === 'validatecode') {
        return this.codeInfo.mobile === '' || this.codeInfo.validateCode === ''
      } else {
        return this.psdInfo.mobile === '' || this.psdInfo.password === ''
      }
    }
  },
  //获取code
  created() {
    // if (isWeChatBrowser) {
    //   this.getWXCode()
    // }
  },
  methods: {
    ...mapMutations('account', ['setUser']),
    //切换密码验证码登录
    handleChange(type) {
      this.loginType = type
      this.timer = null
      this.isShow = true
      this.psdInfo = {
        mobile: '',
        password: '',
        validateCode: ''
      }
      this.codeInfo = {
        username: '',
        validateCode: ''
      }
    },
    test() {
      this.imgflag = !this.imgflag
      /* this.isChecked = event.target.checked
      console.log(event.target.checked) */
    },
    onSubmit(values) {
      if (!this.imgflag) {
        this.$dialog
          .alert({
            message: '请先阅读并同意协议'
          })
          .catch(() => {})
        return
      }
      if (this.imgflag) {
        //微信登录
        if (isWeChatBrowser) {
          this.wxLogin(values)
          //浏览器登录直接登录
        } else {
          if (this.loginType === 'password') {
            let params = { ...values, openId: '' }
            API.wxloginByPsd(params).then(this.setUserInfo)
          }
          if (this.loginType === 'validatecode') {
            let params = { ...values, openId: '' }
            API.wxloginByMsg(params).then(this.setUserInfo)
          }
        }
      }
    },
    async getCode() {
      if (!this.codeInfo.mobile) {
        this.$message.warning('请输入手机号')
        return false
      }
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.isShow = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.isShow = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
      let res = await API.getCodeByPhoneNumber({
        mobile: this.codeInfo.mobile
      })
      if (res.data && res.data.code === 1000) {
        this.$message.success('验证码发送成功')
      }
    }
  }
}
</script>
<style scoped lang="less">
.login-banner,
.login-banner-img {
  width: 375px;
  height: 259px;
}
.login-title {
  margin: 50px 40px 13.5px 40px;
  font-size: 16px;
  font-weight: bold;
  color: #999;
}
.c-y5h58s {
  &-line {
    margin: 0 20px;
    height: 13px;
    width: 1px;
    background-color: #ccc;
  }
  &-active {
    color: @c-color-primary;
  }
  &-img-active {
    left: calc(50%);
  }
}
.login-title-line {
  position: relative;
  width: 295px;
  .login-title-line-img {
    width: 295px;
    height: 3px;
  }
}
.login-title-line-inner {
  position: absolute;
  top: 0;
  width: 50%;
  text-align: center;
  .login-title-line-inner-img {
    width: 100%;
    height: 3px;
  }
}
.form-content {
  margin: 0 40px;
  .form-user-img {
    height: 21px;
  }
  .form-psd-img {
    width: 19px;
    height: 20px;
  }
}
.psd-color {
  color: @c-color-primary;
  font-size: 13px;
}
.psd-color-inactive {
  color: #ccc;
  font-size: 13px;
}
.form-btn {
  margin: @c-gap-page;
}
.form-btn-border {
  border-radius: 9px;
  height: 50px;
  line-height: 50px;
  color: white;
}
.login-bottom {
  margin-top: 30px;
  padding-bottom: 30px;
  font-size: 12px;
  text-align: center;
  color: #999;
}
.login-protocol {
  color: #09a7fe;
}
.c-3lvam3 {
  flex: 1;
  text-align: center;
}
</style>
